<template>
  <div class="icons-container">
      <el-row v-if="checkPermission(['department','business','budget'])" class="topRow">
        <el-dropdown style="margin-buttom:20px">
        <el-button type="primary">
      	选择单位<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
            <template v-for="item in compList">
                <el-dropdown-item @click.native="changeCompany(item)">{{ item.cpName }}</el-dropdown-item>
            </template>
        </el-dropdown-menu>
      </el-dropdown>
       <el-tag>{{companyName}}</el-tag>
      </el-row>
    <el-tabs type="border-card">
        <div class="grid">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="number"
              label="序号"
              width="120"
              align="center">
            </el-table-column>

             <el-table-column label="收入" align="center">
              <el-table-column
                prop="revenueItemCategory"
                label="项目"
                width="180"
                align="center">
              </el-table-column>
                <el-table-column
                  prop="annualTotalIncome"
                  label="预算数"
                  width="180"
                  align="center">
                </el-table-column>
                </el-table-column>
              <el-table-column label="支出" align="center">
              <el-table-column
                prop="functionType"
                label="支出功能分科目(按大类)"
                width="180"
                align="center">
              </el-table-column>
                <el-table-column
                  prop="functionPayment"
                  label="预算数"
                  width="180"
                  align="center">
                </el-table-column>

                 <el-table-column
                   prop="projectType"
                   label="部门预算支出经济科目(按大类)"
                   width="180"
                   align="center">
                 </el-table-column>
                   <el-table-column
                     prop="projectPayment"
                     label="预算数"
                     width="180"
                     align="center">
                   </el-table-column>
                   </el-table-column>
          </el-table>
          <el-row class="topRow">
              <el-button style="float:right;margin-right:50px;margin-top:10px" type="primary" @click="pass()">通过</el-button>
               <el-button style="float:right;margin-right:20px;margin-top:10px" type="danger" @click="back()">退回</el-button>
            </el-row>
        </div>
    </el-tabs>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import { getIncome,getPaymentByFunction,getPaymentByGov,getAllCompany,getSummary,submit,check} from '@/api/budget'
export default {
  name: "Icons",
    data() {
      return {
      companyName:"未选择单位",
      compList:[],
      loading: false,
      // 表格组件 列表数据对象
      tableData: [],
      planList: [],
      editRowJson: '',
      summaryId:123,
      num:0,
      flag:[]
      }
    },
    created() {
    this.initData();
  },
    methods: {
    checkPermission,
    initData() {
      if(this.$store.getters.roles[0]==='company')
      this.getList();
      else
      this.getAllCompany()
    },
    /**
     * @description 获取列表
     * @method getList
     */
    getList() {
      getIncome().then(response => {
        var list1=response.data
        for(var i=0;i<list1.length;i++){
        list1[i].number=i+1
        list1[i].functionType=null;
        list1[i].functionPayment=null;
        list1[i].projectType=null;
        list1[i].projectPayment=null;
        this.tableData.push(list1[i])
        }
        this.getPaymentByFunction(this.summaryId)
        this.getPaymentByGov(this.summaryId)
      })
      },
      getPaymentByFunction(id){
        getPaymentByFunction(id).then(response => {
          var list2=response.data
          for(var i=0;i<list2.length;i++){
          var totalBudget=0;
          var list21=list2[i].paymentOutDTOList
          for(var j=0;j<list21.length;j++){
            var budget=list21[j].totalBudget
            totalBudget=totalBudget+budget
          }
          this.tableData[i].functionType=list2[i].name
          this.tableData[i].functionPayment=totalBudget
          }
        })
      },
      getPaymentByGov(id){
        getPaymentByGov(id).then(response => {
        console.log(response)
        var list3=response.data
        for(var i=0;i<list3.length;i++){
        var totalBudget=0;
        var list31=list3[i].paymentOutDTOList
        for(var j=0;j<list31.length;j++){
          var budget=list31[j].totalBudget
          totalBudget=totalBudget+budget
        }
        this.tableData[i].projectType=list3[i].name
        this.tableData[i].projectPayment=totalBudget
        }
      })
      },
      getAllCompany(){
        var companyTotal=[];
        var companyTotal2=[];
        var flag=false;
          getAllCompany(2).then(response=>{
              console.log(response)
      	  var department=response.data;
      	  for(var i=0;i<department.length;i++)
      	  {
      	    var company=department[i].companyInfoPOList;
      	    for(var j=0;j<company.length;j++){
      	      var companyEnd=company[j];
      	      companyTotal.push(companyEnd)
      	    }
          }
            console.log(companyTotal)
            compList=companyTotal

         })
      },

       changeCompany(item){
         console.log(item)
         this.companyName=item.cpName
         getSummary(item.id).then(response =>{
           console.log(response)
           this.summaryId=response.data.id
         })
         this.getList()
       },

       pass(){
         submit(this.summaryId,123,1).then(response=>{
          console.log(response)
         })

       },
       back(){
         submit(this.summaryId,null,0).then(response=>{
          console.log(response)
         })
       },
       check(id){
         check(id).then(response=>{
             console.log(response)
             this.flag[this.num]=response.data
             this.num++
           })

       }
   }
 };
</script>

<style lang="scss" scoped>
.icons-container{
  margin: 10px 20px 0;
}
</style>
